import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, Breadcrumb, Space, Col, Row, Checkbox, DatePicker, Modal, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import service from '../../../../api/lst';
import './Addgift.scss'
import { useSearchParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
interface ListType {
    key: React.Key;
    name: string;
    price: number;
    stock: number;
    salesvolume: number;
    img: string;
    classify: string;
    id: number,
    falg: false
}
const { RangePicker } = DatePicker;
const { TextArea } = Input;

function Addgift(props: any) {
    const [isModalOpen, setIsModalOpen] = useState(false);
    var [text, setText] = useState([])
    let [params, setParams] = useSearchParams();
    let [id, setid] = useState();
    var dispatch = useDispatch()
    var [listData, setListData] = useState<ListType[]>([])
    var info = async () => {
        var id = params.get('id')

        // var res3 = await service.marketing.conpon_info({ id })
        // // console.log(res3);
        // setText(res3.data)
    }
    useEffect(() => {
        info()
    }, [])
    var navigate = useNavigate()
    //返回
    const back = () => {
        navigate('/index/gift')
    }
    //提交
    var onFinish = async (formvalues: any) => {
        // console.log(formvalues);
        const type = "满" + formvalues.decrement + "元送" + name
        // console.log(type);
        const decrement = "满" + formvalues.decrement + "元满赠活动"
        const time = (formvalues.time[0].$y) + "/" + (formvalues.time[0].$M + 1) + "/" + (formvalues.time[0].$D) + " - " + (formvalues.time[1].$y) + "/" + (formvalues.time[1].$M + 1) + "/" + (formvalues.time[1].$D)
        if (id) {
            var res = await service.marketing.gift_list2
            ({id:id, name: formvalues.name, content: type, type: decrement, states: formvalues.states, time: time, range: formvalues.range })     
        } else {
            var res = await service.marketing.gift_add
                ({ name: formvalues.name, content: type, type: decrement, states: formvalues.states, time: time, range: formvalues.range })            // console.log(text);
        }
        dispatch({ type: 'REMOVE_ID' })
        navigate('/index/gift')

    }



    //弹出

    //弹出

    const showModal = async () => {
        setIsModalOpen(true);
        var res4 = await service.decrement.shoulist_list()
        res4.data.map((item: any) => {
            item.key = item.id
        })
        setListData(res4.data)
        // console.log(res4);
    };



    const handleCancel = () => {
        setIsModalOpen(false);
    };
    var [name, setName] = useState('')
    var [img, setImg] = useState('')
    var [price, setPrice] = useState(99)
    var [stocks, setStocks] = useState()
    const check = (record: any) => {
        record.falg = !record.falg
        console.log(record);
        setName(record.name);
        setImg(record.img);
        setPrice(record.price)
        setStocks(record.stock)

    }
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const column: ColumnsType<ListType> = [
        {
            title: '商品信息',
            dataIndex: 'name',
            render: (_, record) => <div className='imgs' style={{ width: 200, display: 'flex' }}>
                <input type="checkbox" onChange={(e) => { check(record) }} />
                <img src={record.img} alt="" style={{ width: 50 }} />
                <p style={{ width: 120 }}>{record.name}</p>
            </div>
        },
        {
            title: '价格',
            dataIndex: 'price',
            render: (_, record) => <p>{record.price}</p>

        },
        {
            title: '库存',
            dataIndex: 'stock',
            render: (_, record) => <p>{record.stock}</p>

        },
        {
            title: '销量',
            dataIndex: 'salesvolume',
            render: (_, record) => <p>{record.salesvolume}</p>

        },
    ];



    return (
        <div className='addgift'>
            <div className="head">
                <div className="top">
                    <div className="bread">
                        <Breadcrumb>
                            <Breadcrumb.Item>营销</Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <a href="">优惠券</a>
                            </Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <a href="">新建优惠券</a>
                            </Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    {id ? <h2>编辑优惠券</h2> : <h2>新建优惠券</h2>}

                </div>

            </div>
            <div className='form'>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}

                >
                    <Form.Item name='name' label="优惠券名称" >
                        <Input />
                    </Form.Item>
                    <Form.Item name="states" label="状态">
                        <Select
                            style={{ marginRight: 30 }}
                            options={[
                                { value: '未开始', label: '未开始' },
                                { value: '进行中', label: '进行中' },
                                { value: '已结束', label: '已结束' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name='decrement' label="满减信息" >
                        <Input style={{ width: 120, marginRight: 40 }} />
                    </Form.Item>
                    <span onClick={showModal} className="span">选择赠品</span>
                    <Form.Item name='range' label="使用范围">
                        <Select>
                            <Select.Option value="全部课程">全部课程</Select.Option>
                            <Select.Option value="视频课程">视频课程</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name='time' label="有效期">
                        <RangePicker />
                    </Form.Item>
                    <Form.Item label="操作">
                        <Button htmlType="submit" style={{ marginRight: 30 }}>
                            提交
                        </Button>
                        <Button htmlType="button"
                            onClick={back}
                        >
                            返回
                        </Button>
                    </Form.Item>
                </Form>
                <Modal title="商品列表" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <Table
                        columns={column}
                        dataSource={listData}
                    />
                </Modal>
            </div>
        </div>
    );
}

export default Addgift;